﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
    

<div class="modal-dialog demo2do-modal-dialog" style="width: 1000px">

  <div class="modal-content">

    <div class="modal-header beast-breadcrumb no-bottom-border clearfix">

      <h2><i class="glyphicon glyphicon-fire" title=""></i>&nbsp;&nbsp;<span>任务列表&nbsp;-&nbsp;过滤查询</span></h2>

      <button type="button" class="close" data-dismiss="modal">&times;</button>

    </div>

    <form class="form-horizontal" method="GET" action="${ctx.host}/tasks/search">

      <input type="hidden" name="filter" value="true" >

      <div class="modal-body">

        <div class="form-group demo2do-form-group">
          
          <label class="col-xs-2 control-label">广告名称</label>
          <div class="pull-left" style="width: 30%">
            <input type="text" class="form-control" name="title" />
          </div>
          
          <label class="col-xs-2 control-label">用户名称</label>
          <div class="pull-left" style="width: 30%">
            <input type="text" class="form-control" name="customerName" />
          </div>
          
        </div>
        
        <div class="form-group demo2do-form-group">
          
          <label class="col-xs-2 control-label">投放平台</label>
          <div class="pull-left" style="width: 30%">
            <select name="socialType" class="form-control" data-live-search="true" data-size="5">
                <option value="">全部</option>
                <c:forEach var="socialType" items="${enums['socialType']}" >
                  <option value="${socialType.name}">${socialType.description}</option>
              </c:forEach>
            </select>
          </div>
          
          <label class="col-xs-2 control-label">任务状态</label>
          <div class="pull-left" style="width: 30%">
            <select name="taskStatus" class="form-control" data-live-search="true" data-size="5">
                <option value="">全部</option>
                <<c:forEach var="taskStatus" items="${enums['taskStatus']}" >
                  <option value="${taskStatus.name}">${taskStatus.alias}</option>
              </c:forEach>
            </select>
          </div>
          
        </div>
        
        <div class="form-group demo2do-form-group">

          <label class="col-xs-2 control-label">创建时间</label>
          <div class="pull-left" style="width: 30%;">
            <div class="input-group date">
              <input type="text" name="startDate" class="form-control" value="${param.startDate}"/>
              <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
            </div>
          </div>

          <label class="col-xs-2 control-label">完成时间</label>
          <div class="pull-left" style="width: 30%;">
            <div class="input-group date">
              <input type="text" name="startDate" class="form-control" value="${param.startDate}"/>
              <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
            </div>
          </div>

        </div>
        
      </div>

      <div class="modal-footer">
        <button type="submit" class="btn btn-success btn-shadow btn-shadow-success demo2do-btn">查询</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-dismiss="modal">取消</button>
      </div>

    </form>

  </div>

</div>

<script type="text/javascript">

  $('select[name="socialType"]').select2({
    placeholder: '选择投放平台',
    minimumResultsForSearch: -1,
    allowClear: true
  });
  
  $('select[name="taskStatus"]').select2({
    placeholder: '选择任务状态',
    minimumResultsForSearch: -1,
    allowClear: true
  });

  $(document).ready(function() {
    $(".date").datetimepicker({
      format: 'yyyy-mm-dd',
      autoclose: true,
      language: 'zh-CN',
      todayBtn: 'linked',
      todayHighlight: true,
      pickerPosition: 'bottom-left',
      minView: 'month'
    })
  });

</script>